<template>
	<!-- 消息列表 -->
	<view class="content display  displayColumn width-100 fontSize font_comm">
		<u-navbar @rightClick="rightClick" :autoBack="true" bgColor="transparent">
			<template slot="left">
				<uni-icons type="left" color="#fff;" size="23" ></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title" style="color: #fff;">消息中心</text>
			</template>
		</u-navbar>
		<view class="fn_one display  displayColumn ">
			<view class="fn_one_one display   " style="margin-top: 182rpx;">
				<span class="fn_ttx1 M-L30" >未读消息 {{value1+value2}}</span>
				<view class="fn_laji display  all_item " @click="yijian">
					<image :src="imgList.img3" class="img1" mode=""></image>
					<span class="fn_ttx2" style="margin-left: 8rpx;">一键已读</span>
				</view>
			</view>
			<view class="twodingdan display  all_item" style="margin-top: 34rpx;">
				<view class="twodingdan_one display displayColumn  all_item" @click="dingdan(0)">
					<uniBadges class="uni-badge-left-margin" :text="value1+value2" absolute="rightTop" :offset="[5, 5]" size="small">
					<view class="fn_center display   all_item">
						<image :src="imgList.img0" class="img2" mode=""></image>
					</view>
					</uniBadges>
					<span class="fn_ttx4 M-T8">全部消息</span>
				</view>
				<view class="twodingdan_one display displayColumn  all_item"  @click="dingdan(1)">
					<uniBadges class="uni-badge-left-margin" :text="value1" absolute="rightTop" :offset="[5, 5]" size="small">
					<view class="fn_left display   all_item">
						<image :src="imgList.img1" class="img2" mode=""></image>
					</view>
					</uniBadges>
					<span class="fn_ttx4 M-T8">订单消息</span>
				</view>
				<view class="twodingdan_one display  displayColumn all_item"  @click="dingdan(2)">
					<uniBadges class="uni-badge-left-margin" :text="value2" absolute="rightTop" :offset="[5, 5]" size="small">
					<view class="fn_right display   all_item">
						<image :src="imgList.img2" class="img2" mode=""></image>
					</view>
					</uniBadges>
					<span class="fn_ttx4 M-T8">通知消息</span>
				</view>
			</view>
		</view>
		<!-- 消息列表 -->
		<scroll-view id="ceshi" scroll-y="true" class="scroll-Y  " :style="{height: scrollHeight,marginTop:'20rpx'}" @scrolltolower="scrolltolower">
			<view class="fn_all display  displayColumn width-100 all_item ">
				<block v-for="(item,index) in arr" :key="index">
				<view class="fn_all_one display  displayColumn M-T20" v-if="item.appMessageType==0" @click="toread(item.id)">
					<view class="fnx_one display displaycenter_aliem ">
						<view class="fnx_one_left display  displaycenter_aliem">
							<image :src="imgList.img1" class="img3" mode=""></image>
							<span class="fnx_x1 M-L12">订单消息</span>
						</view>
						<view class="fnx_one_right display  M-R24" v-if="item.msgRead==1"></view>
					</view>
					<view class="fnx_two display  displaycenter_aliem" style="margin-top: 16rpx;"></view>
					<span class="fnx_ttx2 M-T20 M-L24">{{item.msgContent}}</span>
					<span class="fnx_time M-T12 M-L24">{{item.createTime}}</span>
				</view>
				<view class="fn_all_one display  displayColumn M-T20" v-if="item.appMessageType==1">
					<view class="fnx_one display displaycenter_aliem ">
						<view class="fnx_one_left display  displaycenter_aliem">
							<image :src="imgList.img2" class="img3" mode=""></image>
							<span class="fnx_x1 M-L12">通知消息</span>
						</view>
						<view class="fnx_one_right display  M-R24" v-if="item.msgRead==1"></view>
					</view>
					<view class="fnx_two display  displaycenter_aliem" style="margin-top: 16rpx;"></view>
					<span class="fnx_ttx2 M-T20 M-L24">消息标题</span>
					<view class="name_fn display  M-T12">
						<span :class="{fnx_time:!falg,fnx_time1:falg,  'M-L24':true, 'M-R24':true}">{{item.msgContent}} <span class="zhankai" style="margin-left: 15rpx;" @click="falg = !falg" v-if="falg">收起消息</span></span>
						<span class="zhankai" @click="falg = !falg" v-if="!falg" style="margin-right: 6rpx;">展开全部</span>
					</view>
				</view>
			</block>
			</view>
			<view class="display width-100" style="height: 80rpx;">
				
			</view>
			</scroll-view>
	</view>
</template>

<script>
	import uniBadges from './uni-badge/components/uni-badge/uni-badge.vue'
	export default {
		components:{
			uniBadges
		},
		data() {
			return {
				wodeIndex:0,//默认为全部
				index:0,
				scrollHeight:'90vh',
				falg:false,
				arr:[],
				pageNum:1,
				value1:0,//订单
				value2:0,//通知
				imgList:{
					img0:this.$imgUrls+'2024/12/18/e9bbcfdca5f54665964c01a77a9367a7.png',//全部
					img1:this.$imgUrls + '2024/12/06/39f38c648c6f4243961bdebda3188f5d.png',//订单
					img2:this.$imgUrls + '2024/12/06/d008dde54380461a9271e34b024522fe.png',//消息
					img3:this.$imgUrls + '2024/12/06/790ed5351070454d9efc8c783e65eaa3.png',//清理
				}
			}
		},
		onLoad(){
			this.$modal.loading('加载中');
			this.getList();
			// 获取订单数量 和 通知数量
			this.getList1();
			this.getList2();
		},
		onReady() {
		      const that = this
		      this.$nextTick(() => {
		        uni.getSystemInfo({
		          success: function (res) {
		            const query = wx.createSelectorQuery()
		            query.select('#ceshi').boundingClientRect()
		            // 获取滚动容器css数据
		            query.exec((resData) => {
						console.log(resData)
		              if (resData && resData.length) {
		                // 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
		                that.scrollHeight = (res.windowHeight - resData[0].top)*2 + 'rpx'
		              }
		            })
		          },
		        })
		      })
			},
		methods: {
			// 触底加载
			scrolltolower(){
				this.pageNum++
				this.getList();
			},
			toread(id){
				let data = {
					id:id
				};
				console.log(data)
				this.$req.put(`/xcx/userMsg/read/${data.id}`).then(res=>{
					if(res.data.code==200){
						for(let i=0;i<this.arr.length;i++){
							if(this.arr[i].id==id){
								if(this.arr[i].appMessageType==0&&this.value1!=0){
									this.value1--
								}else{
									if(this.value2!=0){
										this.value2--
									}
									
								}
								if(this.arr[i].msgRead==1){
									
								}
								this.arr[i].msgRead=0
							}
						}
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			// 一键已读
			yijian(){
				this.$req.put('/xcx/userMsg/readAll').then(res=>{
					if(res.data.code==200){
						this.$modal.msg(res.data.msg)
						this.pageNum= 1;
						this.value1 = 0;
						this.arr = [];
						this.value2 = 0;
						this.getList();
						this.getList1();
						this.getList2();
					}else{
						this.$modal.msg(res.data.msg)
					}
				})
			},
			dingdan(index){
				
				this.pageNum = 1;
				this.arr = [];
				console.log(index)
				this.wodeIndex = index;
				this.getList();
				// this.$tab.navigateTo('/packageA/ordermessage/ordermessage?id=' + index)
			},
			getList(){
				let data = {
					appMessageType:this.wodeIndex==0?-1:this.wodeIndex-1,
					pageSize:10,
					pageNum:this.pageNum
				}
				console.log(data)
				this.$req.get('/xcx/userMsg/list',data).then(res=>{
					this.$modal.closeLoading();
					console.log(res)
					if(res.data.total==this.arr.length){
						return false;
					}
					if(res.data.code==200){
						this.arr = this.arr.concat(res.data.rows);
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			getList1(){
				let data = {
					appMessageType:0,//订单消息 1通知消息
					pageSize:1000,
					pageNum:1
				}
				this.$req.get('/xcx/userMsg/list',data).then(res=>{
					this.$modal.closeLoading();
					// console.log(res)
					if(res.data.code==200){
						res.data.rows.forEach(item=>{
							if(item.msgRead==1){
								this.value1++
							}
						})
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			getList2(){
				let data = {
					appMessageType:1,//订单消息 1通知消息
					pageSize:1000,
					pageNum:1
				}
				this.$req.get('/xcx/userMsg/list',data).then(res=>{
					this.$modal.closeLoading();
					console.log(res)
					if(res.data.code==200){
						res.data.rows.forEach(item=>{
							if(item.msgRead==1){
								this.value2++
							}
						})
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.fn_one{
	width: 750rpx;
	min-height: 402rpx;
	background: linear-gradient( 180deg, #2373CA 0%, #F4F5FA 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	
}
.zhankai{
	font-weight: 400;
	font-size: 24rpx;
	color: #126BC9;
	white-space: nowrap;
	
}
.img1{
	height: 22rpx;
	width: 22rpx;
}
.fn_one_one{
	justify-content: space-between;
	align-items: center;
}
.fn_ttx1{
	font-weight: 600;
	font-size: 24rpx;
	color: #FFFFFF;
	line-height: 24rpx;
}
.fn_ttx2{
	font-weight: 600;
	font-size: 20rpx;
	color: #126BC9;
}
.fn_laji{
	width: 150rpx;
	height: 40rpx;
	background: #FFFFFF;
	border-radius: 20rpx 0rpx 0rpx 20rpx ;
}
.twodingdan{
	justify-content: space-around;
}
.uni-badge-left-margin {
		// margin-left: 10px;
	}
.img2{
	width: 49rpx;
	height: 54rpx;
}
.fn_left{
	width: 110rpx;
	height: 110rpx;
	background: linear-gradient( 141deg, #FCF09D 0%, #FFFAD7 100%);
	
	border-radius:50%;
}
.fn_center{
	width: 110rpx;
	height: 110rpx;
	background: linear-gradient( 141deg, #126bc9 0%, #126bc8 100%);
	border-radius:50%;
}
.fn_right{
	width: 110rpx;
	height: 110rpx;
	background: linear-gradient( 147deg, #B3FCFD 0%, #E1FFFF 100%);
	border-radius: 50%;
}
.fn_ttx4{
	font-weight: 600;
	font-size: 24rpx;
	color: #000000;
}
.badege{
	position: absolute;
	min-width: 30rpx;
	min-height: 30rpx;
	background: #FF5449;
	border-radius: 50%;
}
.fn_bdj{
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
}
.fnx_one{
	justify-content: space-between;
	
}
.fnx_one_left{
	margin-left: 24rpx;
}
.fnx_one_right{
	width: 20rpx;
	height: 20rpx;
	background: #FF5449;
	border-radius: 50%;
}
.img3{
	width: 30rpx;
	height: 34rpx;
}
.fnx_x1{
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
}
.fnx_two{
	width: 690rpx;
	height: 0rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	border: 2rpx solid #F6F6F6;
}
.fnx_ttx2{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
	text-align: left;
}
.fnx_time{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
	text-align: left;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.fnx_time1{
	width: 550rpx;
	overflow: hidden;
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
	text-align: left;
}
.fn_all_one{
	width: 690rpx;
	padding-bottom: 24rpx;
	padding-top: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
</style>
